<template>
  <span
    class="flex gap-1 items-center text-sm font-normal text-gray-700 bg-white border border-gray-300 px-2 py-1 rounded-sm cursor-pointer hover:bg-gray-50"
    :style="setTagColor()"
    @click="toggleActive">
    <svg
      width="12"
      height="12"
      viewBox="0 0 12 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <mask
        id="mask0_3946_95937"
        style="mask-type: luminance"
        maskUnits="userSpaceOnUse"
        x="1"
        y="0"
        width="10"
        height="12">
        <path
          d="M1.33105 11.625V0.375H10.6048V11.625H1.33105Z"
          fill="white"
          stroke="white"
          stroke-width="0.375" />
      </mask>
      <g mask="url(#mask0_3946_95937)">
        <path
          d="M9.35274 3.56641C9.80128 4.01278 10.1572 4.54337 10.4001 5.12771C10.643 5.71204 10.768 6.33861 10.768 6.97141C10.768 7.60421 10.643 8.23077 10.4001 8.81511C10.1572 9.39944 9.80128 9.93004 9.35274 10.3764C8.91074 10.8218 8.38496 11.1752 7.80572 11.4165C7.22647 11.6577 6.60521 11.7819 5.97774 11.7819C5.35028 11.7819 4.72901 11.6577 4.14977 11.4165C3.57052 11.1752 3.04474 10.8218 2.60274 10.3764C2.1542 9.93004 1.79827 9.39944 1.5554 8.81511C1.31253 8.23077 1.1875 7.60421 1.1875 6.97141C1.1875 6.33861 1.31253 5.71204 1.5554 5.12771C1.79827 4.54337 2.1542 4.01278 2.60274 3.56641L5.97774 0.191406V1.87516L5.66274 2.18641L3.41274 4.43641C2.91042 4.93887 2.56836 5.57899 2.42982 6.27584C2.29129 6.97269 2.36249 7.69497 2.63442 8.35136C2.90636 9.00775 3.36682 9.56876 3.95758 9.96347C4.54834 10.3582 5.24288 10.5688 5.95337 10.5688C6.66385 10.5688 7.35839 10.3582 7.94915 9.96347C8.53991 9.56876 9.00037 9.00775 9.27231 8.35136C9.54425 7.69497 9.61545 6.97269 9.47691 6.27584C9.33837 5.57899 8.99631 4.93887 8.49399 4.43641L9.35274 3.56641ZM7.66524 3.37516C7.54032 3.3759 7.418 3.33948 7.31383 3.27055C7.20965 3.20161 7.12832 3.10325 7.08018 2.98798C7.03203 2.87271 7.01924 2.74573 7.04343 2.62318C7.06762 2.50062 7.12769 2.38802 7.21603 2.29969C7.30436 2.21136 7.41696 2.15128 7.53951 2.12709C7.66207 2.1029 7.78905 2.11569 7.90432 2.16384C8.01959 2.21199 8.11794 2.29332 8.18688 2.39749C8.25582 2.50167 8.29223 2.62399 8.29149 2.74891C8.29051 2.91469 8.22421 3.07341 8.10698 3.19064C7.98975 3.30788 7.83103 3.37417 7.66524 3.37516Z"
          fill="#F04438" />
      </g>
    </svg>
    PyTorch
  </span>
</template>

<script setup>
  const props = defineProps({
    active: Boolean
  })

  const emit = defineEmits(['setActiveFrameworkTag'])

  const toggleActive = () => {
    emit('setActiveFrameworkTag', 'framework', 'pytorch')
  }
  const setTagColor = () => {
    if (props.active) {
      return 'color: white; background-color: #4D6AD6;'
    }
  }
</script>
